<template>
    <div>
        <el-dialog title="商品" class="noselect"  :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
            <el-tabs v-model="activeName" type="card" >
                <el-tab-pane :disabled="true" label="1.基本信息"  style="height: 600px" name="info" class="demo-ruleForm" v-slim-scroll>
                    <el-form :model="modelForm" ref="modelFormInfo" label-width="100px"  style="width: 600px;height: 600px">
                        <el-form-item  prop="name" label=" " :rules="[ { required: true, message: '请输入商品名称', trigger: 'blur' }]">
                            <el-input placeholder="请输入商品名称" @blur="setPy()" v-model="modelForm.name"  :maxlength="32">
                                <template slot="prepend">
                                    <el-tooltip placement="top" content="（此项为必填项，不能填写已有的商品！）">
                                        <el-button tabIndex="-1">商品名称</el-button>
                                    </el-tooltip>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item  prop="spell" label=" "  :rules="[{ required: true, message: '请输入快捷码', trigger: 'blur' }]">
                            <el-input placeholder="请输入快捷码" v-model="modelForm.spell"  :maxlength="32">
                                <template slot="prepend">
                                    <el-tooltip placement="top" content="（此项根据商品名称自动生成,也可自行修改！）">
                                        <el-button tabIndex="-1">快捷码</el-button>
                                    </el-tooltip>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item  prop="no" label=" "  :rules="[
                            { required: true, message: '请输入请输入商品编码', trigger: 'blur' },
                             { min: 5, max: 5, message: '请输入5位编码', trigger: 'blur' }
                            ]">
                            <el-input placeholder="请输入商品编码" v-model="modelForm.no"  :maxlength="5">
                                <template slot="prepend">
                                    <el-tooltip placement="top" content="（编码为五位数字,不可重复）">
                                        <el-button tabIndex="-1">商品编码</el-button>
                                    </el-tooltip>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item  prop="nameEn" label=" "  :rules="[]">
                            <el-input placeholder="请输入英文名称" v-model="modelForm.nameEn"  :maxlength="32">
                                <template slot="prepend">
                                    <el-tooltip placement="top" content="请填写英文名称">
                                        <el-button tabIndex="-1">英文名称</el-button>
                                    </el-tooltip>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item  prop="category" label=" "  :rules="[
                                { required: true, message: '选择所需商品类别', trigger: 'blur',type: 'number'},
                                { type: 'number', message: '请选择正确类别'}
                            ]">
                            <div class="addInput">
                                <el-tooltip placement="top" content="（选择所需商品类别，不能不选！）">
                                    <el-button tabIndex="-1">所属分类</el-button>
                                </el-tooltip>
                                <el-select v-model.number="modelForm.category" placeholder="请选择所属分类">
                                    <el-option
                                            v-for="item in categoryList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item >
                            <el-button type="primary" @click="infoClick('modelFormInfo')">下一步</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane :disabled="true"  label="2.价格提成"   name="price" v-slim-scroll class="demo-ruleForm">
                    <el-form :model="modelForm" ref="modelFormPrice" label-width="100px"  style="width: 600px;height: 600px" >
                        <el-form-item  prop="unit" label=" "  :rules="[{ required: true, message: '请选择商品单位', trigger: 'blur' ,type: 'number'}]">
                            <div class="addInput">
                                <el-tooltip placement="top" content="（选择商品单位，此项为必选项！）">
                                    <el-button tabIndex="-1">商品单位</el-button>
                                </el-tooltip>
                                <el-select v-model.number="modelForm.unit" style="width: 70%" placeholder="请选择商品单位">
                                    <el-option
                                            v-for="item in dishesUnitList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label=" "   prop="weigh" :rules="[]">
                            <el-checkbox v-model="modelForm.weigh" @change="modelForm.weigh ? moreSpecifications=false : moreSpecifications=moreSpecifications">称重商品</el-checkbox> &nbsp;&nbsp;&nbsp;称重商品单位要与电子秤设置的单位保持一致
                        </el-form-item>
                        <el-form-item label=" "  :rules="[]">
                            <el-checkbox v-model="moreSpecifications" v-if="!modelForm.weigh" >多规格</el-checkbox>
                            <el-checkbox v-model="moreSpecifications" v-if="modelForm.weigh"  disabled>多规格</el-checkbox>
                            <div class="orderTable" v-if="moreSpecifications">
                                <el-table
                                        :data="specificationsTableData"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            type="index"
                                            width="50">
                                    </el-table-column>
                                    <el-table-column
                                            width="80">
                                        <template slot-scope="scope">
                                            <span class="el-icon-plus" style="cursor: pointer;font-size: 10px;padding-right: 5px" @click="addSpecifColumn(scope.$index)"></span>
                                            <span class="el-icon-minus" style="cursor: pointer;font-size: 10px;padding-left: 5px" @click="minusSpecifColumn(scope.$index)"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="dishesSpecification"
                                            label="规格">
                                        <template slot-scope="scope">
                                            <div style="position: relative">
                                                <el-select v-model.number="scope.row.specificationsId" @change="changeGuige(scope.$index)">
                                                    <el-option
                                                            v-for="item in dishesSpecificationList"
                                                            :key="item.id"
                                                            :label="item.name"
                                                            :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="money"
                                            label="单价">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.money" @blur="moneyJiaoyan(scope.row,'money')"  placeholder="0.00"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="vipMoney"
                                            label="会员价">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.vipMoney" @blur="vipMoneyJiaoyan(scope.row,'vipMoney')"  placeholder="0.00"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="isDefault"
                                            label="默认（是/否）">
                                        <template slot-scope="scope" >
                                            <el-switch
                                                    v-model="scope.row.isDefault"
                                                    on-color="#13ce66"
                                                    on-text="是"
                                                    @change="defaultChange(scope.$index)"
                                                    off-text="否"
                                                    off-color="#ff4949">
                                            </el-switch>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-form-item>
                        <el-form-item label=" "  :rules="[]">
                            <el-checkbox v-model="morePractice" >多做法</el-checkbox>&nbsp;&nbsp;&nbsp;<span style="font-size: 12px;color: red">商品配置做法后必选，请为第一个做法加价方式配置不加价，作为默认做法</span>
                            <div class="orderTable" v-if="morePractice">
                                <el-table
                                        :data="tableData"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            type="index"
                                            width="50">
                                    </el-table-column>
                                    <el-table-column
                                            width="80">
                                        <template slot-scope="scope">
                                            <span class="el-icon-plus" style="cursor: pointer;font-size: 10px;padding-right: 5px" @click="addColumn(scope.$index)"></span>
                                            <span class="el-icon-minus" style="cursor: pointer;font-size: 10px;padding-left: 5px" @click="minusColumn(scope.$index)"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="practiceId"
                                            label="做法">
                                        <template slot-scope="scope">
                                            <div style="position: relative">
                                                <el-select v-model.number="scope.row.practiceId" @change="changeZuoFa(scope.$index)">
                                                    <el-option
                                                            v-for="item in dishesPracticeList"
                                                            :key="item.id"
                                                            :label="item.name"
                                                            :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="premiumRate"
                                            label="加价比例">
                                        <template slot-scope="scope">
                                            <el-select v-model.number="scope.row.premiumRate" @change="premiumRateChange(scope.row)">
                                                <el-option
                                                        v-for="item in priceupTypes"
                                                        :key="item.key"
                                                        :label="item.text"
                                                        :value="item.key">
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="money"
                                            label="比例/金额">
                                        <template slot-scope="scope">
                                            <el-input v-if="scope.row.premiumRate!='DONOTADD'" v-model="scope.row.money" @blur="isDouble(scope.row,'money')"  placeholder="0.00"></el-input>
                                            <label v-if="scope.row.premiumRate=='DONOTADD'">0.00</label>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-form-item>
                        <el-form-item label=" " v-if="moreSpecifications"   prop="price" :rules="[rules.numPot2]">
                            <el-input placeholder="请输入商品价格"  style="width: 85%" v-model.number="modelForm.price" disabled></el-input>
                            <el-checkbox v-model="modelForm.season">时价菜</el-checkbox>
                        </el-form-item>
                        <el-form-item label=" " v-if="!moreSpecifications"   prop="price" :rules="[{ required: true, message: '请输入商品价格', trigger: 'blur',type: 'number'},rules.numPot2]">
                            <el-input placeholder="请输入商品价格" style="width: 85%" v-model.number="modelForm.price">
                                <template slot="prepend">
                                    <el-tooltip placement="top" content="（此项为必填项，请填写原料单价，如：1.5，2...）">
                                        <el-button tabIndex="-1">商品价格</el-button>
                                    </el-tooltip>
                                </template>
                            </el-input>
                            <el-checkbox v-model="modelForm.season">时价菜</el-checkbox>
                        </el-form-item>
                        <el-form-item label=" " v-if="moreSpecifications"  prop="vipPrice" :rules="[rules.numPot2]">
                            <el-input placeholder="请输入会员价格"   style="width: 85%" v-model.number="modelForm.vipPrice" disabled></el-input>
                        </el-form-item>
                        <el-form-item label=" " v-if="!moreSpecifications"  prop="vipPrice" :rules="[{ required: true, message: '请输入会员价格', trigger: 'blur',type: 'number' },rules.numPot2]">
                            <el-input placeholder="请输入会员价格" style="width: 85%" v-model.number="modelForm.vipPrice">
                                <template slot="prepend">
                                    <el-tooltip placement="top" content="（此项为必填项，请填写会员价，如：1.5，2...）">
                                        <el-button tabIndex="-1">会员价格</el-button>
                                    </el-tooltip>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label=" "   prop="printCategory" :rules="[{ required: true, message: '请选择商品打印大类', trigger: 'blur' ,type: 'number'}]">
                            <div class="addInput">
                                <el-tooltip placement="top" content="（选择商品打印大类，此项非必选项！）">
                                    <el-button tabIndex="-1">打印大类</el-button>
                                </el-tooltip>
                                <el-select v-model="modelForm.printCategory" style="width: 70%" placeholder="请选择商品打印大类">
                                    <el-option
                                            v-for="item in printerCategoryUnitList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label=" "   prop="commission" :rules="[]">
                            <el-checkbox v-model="modelForm.commission">商品提成</el-checkbox>&nbsp;&nbsp;&nbsp;（此项为必选项，不选默认为停用！）
                        </el-form-item>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label=" "  v-if="modelForm.commission"  prop="commissionType" :rules="[{ required: true, message: '请选择提成类型', trigger: 'blur'}]">
                                    <div class="addInput">
                                        <el-tooltip placement="top" content="请选择提成类型">
                                            <el-button tabIndex="-1">提成类型</el-button>
                                        </el-tooltip>
                                        <el-select v-model="modelForm.commissionType" style="width: 57%" placeholder="请选择">
                                            <el-option
                                                    v-for="item in commissionTypes"
                                                    :key="item.key"
                                                    :label="item.text"
                                                    :value="item.key">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item  label=" " v-if="modelForm.commission"  prop="commissionValue" :rules="[{ required: true, message: '请输入提成值', trigger: 'blur',type:'number' },rules.numPot2]">
                                    <el-input placeholder="请输入提成值" v-if="modelForm.commissionType=='PROPORTION'" @blur="isNum(modelForm,'commissionValue')" v-model.number="modelForm.commissionValue">
                                        <template slot="append">
                                            <el-tooltip placement="top" content="请填写提成值">
                                                <el-button tabIndex="-1">%</el-button>
                                            </el-tooltip>
                                        </template>
                                    </el-input>
                                    <el-input placeholder="请输入提成值" v-if="modelForm.commissionType=='FIXEDAMOUNT'" @blur="isNum(modelForm,'commissionValue')" v-model.number="modelForm.commissionValue">
                                        <template slot="append">
                                            <el-tooltip placement="top" content="请填写提成值">
                                                <el-button tabIndex="-1">元</el-button>
                                            </el-tooltip>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label=" "  prop="futureCost" :rules="[rules.numPot2]">
                            <el-input placeholder="请输入预估成本" style="width: 85%" v-model.number="modelForm.futureCost">
                                <template slot="prepend">
                                    <el-tooltip placement="top" content="(请填写参考成本价，系统最终会优先根据本商品成本卡的配置匹配成本)">
                                        <el-button tabIndex="-1">预估成本</el-button>
                                    </el-tooltip>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="goBackTab('info')">上一步</el-button>
                            <el-button type="primary" @click="priceClick('modelFormPrice')">下一步</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane :disabled="true"  label="3.图片其他"   name="img" v-slim-scroll class="demo-ruleForm">
                    <el-form :model="modelForm" ref="modelFormImg" style="height: 600px">
                        <el-row>
                            <el-col :span="8">
                                <div class="grid-content bg-purple">
                                    <el-upload
                                            class="avatar-uploader"
                                            action="/merchant/image/upload"
                                            :show-file-list="false"
                                            :with-credentials="true"
                                            :on-success="handleAvatarSuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="modelForm.img" width="100%" :src="modelForm.img" class="avatar">
                                        <i class="el-icon-plus avatar-uploader-icon" v-if="!modelForm.img" ></i>
                                        <div  style="margin-top:20px;"><el-button type="primary">上传图片</el-button></div>
                                        <div>&nbsp;</div>
                                    </el-upload>
                                </div>
                            </el-col>
                            <el-col :span="14" :offset="2">
                                <el-form-item label=" "  prop="hot" :rules="[]">
                                    <div class="block">
                                        <span class="demonstration">辣度</span>
                                        <el-rate
                                                v-model="modelForm.hot"
                                                :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                                        </el-rate>
                                    </div>
                                </el-form-item>
                                <el-form-item label=" "  prop="recommend" :rules="[]">
                                    <div class="block">
                                        <span class="demonstration">推荐度</span>
                                        <el-rate
                                                v-model="modelForm.recommend"
                                                :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                                        </el-rate>
                                    </div>
                                    <span>
                                        上传商品图片方式介绍：<br>
                                        (1)点击上方本地上传分辨率不超过500*500<br>
                                        (2)点击此处选择图片
                                    </span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label=" "  prop="introduction" :rules="[,{max: 200, message: '长度最长200个字符', trigger: 'blur' }]">
                            <el-input
                                    type="textarea"
                                    :rows="3"
                                    placeholder="请填写简介"
                                    v-model="modelForm.introduction"  :maxlength="200">
                            </el-input>
                        </el-form-item>
                        <el-form-item label=" "  prop="state" :rules="[]">
                            <el-radio class="radio" v-model="modelForm.state" label="NORMAL">在售</el-radio>
                            <el-radio class="radio" v-model="modelForm.state" label="DISABLED">停售</el-radio>
                        </el-form-item>
                        <el-form-item label=" "  prop="rank" :rules="[]">
                            <el-checkbox v-model="modelForm.rank">参与销量排名</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="goBackTab('price')">上一步</el-button>
                            <el-button type="primary" @click="imgTabClick('modelFormImg')">下一步</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane :disabled="true"  label="4.添加成功" name="success">
                    <el-form :model="modelForm" ref="modelFormSuccess" label-width="200px" style="height: 600px" class="demo-ruleForm" >
                        <div class="text-center">
                            <i class="el-icon-circle-check" style="font-size: 70px;color: #20a0ff"></i><br><br>
                            编辑成功<br><br>
                            <el-button type="primary" @click="result()">继续添加</el-button>
                        </div>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script>
    //注意路径
    export default{
        props: ['isShow','id'],  //参数
        data(){
            return {
                modelForm: {
                },
                 showDialog:false,
                 activityId:"",
                 isSave:true,
                activeName:"info",
                categoryList:[],
                dishesUnitList:[],
                commissionTypes:[],
                printerCategoryUnitList:[],
                moreSpecifications:false,
                morePractice:false,
                dishesSpecificationList:[],
                dishesPracticeList:[],
               specificationsTableData:[
                    {
                        specificationsId: '',
                        money: '0.00',
                        vipMoney: '0.00',
                        isDefault:false,
                    }
                ],
                tableData: [{
                    practiceId: '',
                    premiumRate: 'DONOTADD',
                    money: '0.00',
                }],
                priceupTypes:[],
            };
        },
        watch:{
            isShow:function(newValue,oldValue){
                this.showDialog=newValue;
                if(newValue){
                    if(this.id!=''){
                        this.activityId=this.id;
                        this.isSave=false;
                        this.$http.get("dishess/"+this.activityId+"/update").then(function(data){
                            this.categoryList=data.body.content.categoryList;
                            this.dishesUnitList=data.body.content.dishesUnitList;
                            this.commissionTypes=data.body.content.commissionTypes;
                            this.printerCategoryUnitList=data.body.content.printerCategoryUnitList;
                            this.dishesSpecificationList=data.body.content.dishesSpecificationList;
                            this.dishesPracticeList=data.body.content.dishesPracticeList;
                            this.priceupTypes=data.body.content.priceupTypes;
                            data.body.content.dishes.state=data.body.content.dishes.state.key;
                            if(data.body.content.specificationsTableData.length>0){
                                this.specificationsTableData=data.body.content.specificationsTableData;
                            }
                             if(this.specificationsTableData && this.specificationsTableData.length>0 && this.specificationsTableData[0].specificationsId){
                                this.moreSpecifications=true;
                             }
                             if(data.body.content.tableData.length>0){
                                this.tableData=data.body.content.tableData;
                             }
                             if(this.tableData && this.tableData.length>0  && this.tableData[0].practiceId){
                                this.morePractice=true;
                             }
                            this.modelForm=data.body.content.dishes;
                        });
                    }else{
                        this.isSave=true;
                        this.$http.get("dishess/create").then(function(data){
                            this.categoryList=data.body.content.categoryList;
                            this.dishesUnitList=data.body.content.dishesUnitList;
                            this.commissionTypes=data.body.content.commissionTypes;
                            this.printerCategoryUnitList=data.body.content.printerCategoryUnitList;
                            data.body.content.dishes.commissionType=data.body.content.dishes.commissionType.key;
                            if(data.body.content.dishesSpecificationList.length>0){
                                this.dishesSpecificationList=data.body.content.dishesSpecificationList;
                            }
                            this.dishesPracticeList=data.body.content.dishesPracticeList;
                            this.priceupTypes=data.body.content.priceupTypes;
                            this.modelForm=data.body.content.dishes;
                        });
                    }
                }
            }
        },
        created(){
            window.this = this;
        },
        methods: {
            setPy(){
                if(this.modelForm.name){
                    this.modelForm.pinyin=window.getPy(this.modelForm.name);
                    this.modelForm.spell=window.getIndexPy(this.modelForm.name);
                }
            },
            addColumn(index){
                this.tableData.splice(index+1,0,{
                    practiceId: '',
                    premiumRate: 'DONOTADD',
                    money:'0.00',
                })
            },
            addSpecifColumn(index){
                this.specificationsTableData.splice(index+1,0,{
                    specificationsId: '',
                    money: '0.00',
                    vipMoney: '0.00',
                    isDefault:false,
                })
            },
            minusColumn(index){
                if(this.tableData.length>1){
                    this.tableData.splice(index,1);
                }else{
                    this.$message.info("最少保留一条");
                }
            },
            minusSpecifColumn(index){
                if(this.specificationsTableData.length>1){
                    this.specificationsTableData.splice(index,1);
                }else{
                    this.$message.info("最少保留一条");
                }
            },
            goBack() {
                this.router.go(-1);
            },
            handleAvatarSuccess(res, file) {
                this.modelForm.img = res.content;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            submitForm() {
                var data=JSON.stringify(this.modelForm);
                if(this.isSave){
                    this.$http.post("dishess/create",data,{'content-type': 'application/json'}).then(function(data){
                        if(data.body.status==200){
                            this.$message({
                                message:data.body.message,
                                type: 'success'
                            });
                            this.clearData();
                            this.activeName="success";
                        }else{
                            this.$message.error(data.body.message);
                        }
                    })
                }else{
                    this.modelForm._method="PUT";
                    this.$http.put("dishess/"+this.activityId+"/update",data,{'content-type': 'application/json'}).then(function(data){
                        if(data.body.status==200){
                            this.$message({
                                message:data.body.message,
                                type: 'success'
                            });
                            this.clearData();
                            this.activeName="success";
                        }else{
                            this.$message.error(data.body.message);
                        }
                    });
                }
            },
            resetForm(formName) {
                this.clearData();
                this.activeName="info";
                this.$emit('close');
                this.$refs[formName].resetFields();
                this.showDialog=false;
            },
            clearData(){
                this.isSave=true;
                this.$http.get("dishess/create").then(function(data){
                    this.categoryList=data.body.content.categoryList;
                    this.dishesUnitList=data.body.content.dishesUnitList;
                    this.commissionTypes=data.body.content.commissionTypes;
                    this.printerCategoryUnitList=data.body.content.printerCategoryUnitList;
                    data.body.content.dishes.commissionType=data.body.content.dishes.commissionType.key;
                    this.dishesSpecificationList=data.body.content.dishesSpecificationList;
                    this.dishesPracticeList=data.body.content.dishesPracticeList;
                    this.priceupTypes=data.body.content.priceupTypes;
                    this.modelForm=data.body.content.dishes;
                });
                this.specificationsTableData=[
                    {
                        specificationsId: '',
                        money: '0.00',
                        vipMoney: '0.00',
                        isDefault:false,
                    }
                ];
                this.tableData=[{
                    practiceId: '',
                    premiumRate: 'DONOTADD',
                    money: '0.00',
                }];
            },
            handleClose(done){
                this.clearData();
                this.activeName="info";
                this.$emit('close');
                done();
            },
            infoClick(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.activeName="price";
                    }else{
                        this.$message.error("请检查输入项");
                        return false;
                    }
                });
            },
            priceClick(formName){
                if(this.moreSpecifications){
                    var defaultCount=0;
                    for(var i=0;i<this.specificationsTableData.length;i++){
                        if(this.specificationsTableData[i].isDefault){
                            defaultCount++;
                        }
                    }
                    if(defaultCount<=0){
                        this.$message.error("商品规格必须有默认值");
                        return
                    }
                    if(!this.specificationsTableData[0].specificationsId){
                        this.$message.error("商品规格第一行不能为空");
                        return
                    }
                }
                if(this.morePractice){
                    if(!this.tableData[0].practiceId){
                        this.$message.error("商品做法第一行不能为空");
                        return
                    }
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.activeName="img";
                    }else{
                        this.$message.error("请检查输入项");
                        return false;
                    }
                });
            },
            result(){
                this.activeName="info";
            },
            imgTabClick(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        if(this.moreSpecifications){
                            this.modelForm.dishesSpecifications=this.specificationsTableData;
                        }
                        if(this.morePractice){
                            this.modelForm.dishesPractices=this.tableData;
                        }
                        this.submitForm();
                    }else{
                        this.$message.error("请检查输入项");
                        return false;
                    }
                });
            },
            goBackTab(name){
                this.activeName=name;
            },
            premiumRateChange(item){
                if(item.premiumRate!='DONOTADD'){
                    item.money=1;
                }
            },
            isNum(item,key){
                if(item.type=='PROPORTION'){
                    var r = /^\+?[1-9][0-9]*$/;
                    if( ! r.test(item[key])){
                        item[key]="0.00"
                    }else{
                        item[key]=item[key]
                    }
                }else{
                    this.isDouble(item,key);
                }
            },
            isDouble(item,key){
                var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
                if( ! isNum.test(item[key])){
                    item[key]="0.00"
                }else{
                    item[key]=item[key]
                }
            },
            moneyJiaoyan(item,key){
                var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
                if(!isNum.test(item[key])){
                    item[key]="0.00"
                }else{
                    item[key]=item[key]
                }
                item["vipMoney"]=item[key];
                if(item["isDefault"]){
                    this.modelForm.price=item[key];
                    this.modelForm.vipPrice=item["vipMoney"];
                }
            },
            vipMoneyJiaoyan(item,key){
                var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
                if(!isNum.test(item[key])){
                    item[key]="0.00"
                }else if(item[key]>item["money"]){
                    item[key]=item["money"]
                }else{
                    item[key]=item[key]
                }
                if(item["isDefault"]) {
                    this.modelForm.price = item["money"];
                    this.modelForm.vipPrice = item["vipMoney"];
                }
            },
            defaultChange(index){
                for(var i=0;i<this.specificationsTableData.length;i++){
                    this.specificationsTableData[i].isDefault=false;
                }
                this.specificationsTableData[index].isDefault=true;
                var item=this.specificationsTableData[index];
                this.specificationsTableData.splice(index,1);
                this.specificationsTableData.splice(index,0,item);
                this.modelForm.price =   this.specificationsTableData[index].money;
                this.modelForm.vipPrice = this.specificationsTableData[index].vipMoney;
            },
            changeGuige(index){
                for(var i=0;i<this.specificationsTableData.length;i++){
                    if(i!=index && this.specificationsTableData[i].specificationsId==this.specificationsTableData[index].specificationsId){
                        this.$message.error("不能选择重复规格");
                        this.specificationsTableData[index].specificationsId=""
                    }
                }
            },
            changeZuoFa(index){
                for(var i=0;i<this.tableData.length;i++){
                    if(i!=index && this.tableData[i].practiceId==this.tableData[index].practiceId){
                        this.$message.error("不能选择重复做法");
                        this.tableData[index].practiceId=""
                    }
                }
            }
        }
    }
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
